<!--
 * @Author: your name
 * @Date: 2021-02-20 15:48:50
 * @LastEditTime: 2021-02-20 15:50:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demoe:\前端开发学习\hmtt\hm63-hmtt-wsh\src\views\home\main\shareInfo.vue
-->
<template>
  <div class="details">
    <navBar title="文章详情"></navBar>
    <div class="content">
      <!-- 文章内容 -->
      <div class="top">
        <div class="title">这里好文章，不读就错过了，测试！！！！</div>
        <div class="info">
          <img class="img" src="../../../assets/ZGR.jpg" alt="" />
          <div class="info-middle">
            <div class="name">有点666</div>
            <div class="time">2020/11/10 15:55:44</div>
          </div>
          <div class="attention">+关注</div>
        </div>
        <div class="article">
          这是一个寂寞的天，下着有些伤心的雨。这是一个寂寞的天，下着有些伤心的雨。
        </div>
        <div class="line"></div>
        <div class="manner">
          <button class="com like">
            <div class="iconfont">&#xe600;</div>
            点赞
          </button>
          <button class="com dislike">
            <div class="iconfont nolike">&#xe60c;</div>
            不喜欢
          </button>
        </div>
      </div>
      <!-- 文章理论 -->
      <div class="middle"></div>
      <!-- 底部栏 -->
      <div class="bottom">
        <input
          class="inp"
          type="text"
          placeholder="我有意见..."
          @click="sendComment"
        />
        <div class="btm-rig">
          <div class="b1">
            <div class="iconfont">&#xe600;</div>
            <div class="txt">点赞</div>
          </div>
          <div class="b2">
            <div class="iconfont">&#xe66e;</div>
            <div class="txt">收藏</div>
          </div>
          <div class="b3">
            <div class="iconfont">&#xe740;</div>
            <div class="txt">分享</div>
          </div>
        </div>
        <van-popup v-model="showSend" position="bottom" class="popup">
          <van-field
            v-model="inputValue"
            class="field"
            type="textarea"
            row="4"
          ></van-field>
          <div v-if="inputValue === ''" class="button">发送</div>
          <div v-else class="button red" @click="send">发送</div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showSend: false,
      inputValue: ''
    }
  },
  methods: {
    sendComment () {
      this.showSend = true
    }
  }
}
</script>
<style lang="less" scoped>
.details {
  .content {
    padding: 20px @p15 0;
    background-color: #f5f7f9;
    .top {
      .title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 33px;
        letter-spacing: 1px;
        color: #3a3a3a;
      }
      .info {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin: 30px 0;
        .img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 15px;
        }
        .info-middle {
          display: flex;
          flex: 1;
          flex-direction: column;
          .name {
            font-size: 6px;
          }
          .time {
            font-size: 6px;
            color: #ccc;
          }
        }
        .attention {
          width: 70px;
          height: 28px;
          line-height: 30px;
          text-align: center;
          background: @bg;
          font-size: 14px;
          color: #fff;
          border-radius: 20px;
        }
      }
      .article {
        font-size: 18px;
      }
      .line {
        background-color: #ccc;
        height: 1px;
        margin: 30px 0;
      }
      .manner {
        display: flex;
        justify-content: space-around;
        .com {
          background-color: #fff;
          height: 30px;
          font-size: 7px;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          border: 1px solid #ccc;
          border-radius: 14px;
          margin-bottom: 30px;
          padding: 16px 14px;
        }
        .nolike {
          color: #000;
          font-weight: bold;
        }
      }
    }
    .bottom {
      padding: 0 @p15;
      background-color: #e8f0fe;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 50px;
      display: flex;
      width: 100%;
      align-items: center;
      font-size: 12px;
      .inp {
        flex: 1;
        height: 35px;
        line-height: 35px;
        border: 1px solid #7f7f7f;
        border-radius: 10px;
        background-color: #f8f8f8;
        padding-left: 15px;
      }
      .btm-rig {
        display: flex;
        justify-content: center;
        .b1,
        .b2,
        .b3 {
          text-align: center;
          margin-left: 20px;
          color: #7f7f7f;
          .txt {
            color: #7f7f7f;
          }
        }
      }
    }
    .popup {
      padding: 20px @p15;
      .field {
        background-color: #f7f4f5;
      }
      .button {
        text-align: right;
        font-size: 14px;
        padding-top: 10px;
        color: #ccc;
      }
      .red {
        color: red;
      }
    }
  }
}
</style>
